<template>
  <div class="home">
      <div id="container">
        <header>
            <!-- <button class="add">添加商品</button> -->
        </header>
        <div class="good-box">
            <table>
                <thead>
                    <tr>
                        <th>
                            <input type="checkbox" v-model="allChecked" class="choseAll">全选
                        </th>
                        <th>商品图片</th>
                        <th>
                            商品名称
                        </th>
                        <th>单价</th>
                        <th>数量</th>
                        <th>小计</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                   <tr v-for="(item, i) in result" :key="item._id">
                      <td>
                          <input type="checkbox" v-model="item.checked" ref="singleCheck" class="singleCheck">
                      </td>
                      <td>
                          <img class="goods-img" :src="item.pic" alt="">
                      </td>
                      <td>{{item.title}}</td>
                      <td class="single-price">{{item.price}}</td>
                      <td>
                          <span class="minus" @click="minusGood(item)">-</span><span class="count">{{item.count}}</span><span class="addCount" @click="addCount(item)">+</span>
                      </td>
                      <td class="single-sum">{{item.price*item.count}}</td>
                      <td><button class="del" @click="delGood(i)">删除</button></td>
                    </tr>
                </tbody>
            </table>
        </div>
        <footer>
            <div>
                商品总共<span class="goodsCount">{{totle}}</span>件&#x3000; &#x3000;已选中商品 <span class="checkedCount">{{checkedGoods}}</span>件
            </div>
            <div>
                总价￥<span class="sumPrice">{{sumPrice}}</span>元
            </div>
        </footer>
    </div>
  </div>
</template>

<script>

export default {
  name: 'Home',
  data(){
    return {
      totle: 0,
      checkedGoods: 0,
      sumPrice: 0, 
      allChecked: false,
      result: [{
          "_id": "59f087ef11945e2760c852dd",
          "title": "笔记本电脑",
          "cid": "59f1e1ada1da8b15d42234e9",
          "price": 2346,
          "old_price": "4000",
          "count": 1,
          "checked": false,
          "pic": "http://jd.itying.com/upload/Hfe1i8QDOkfVt-PuGcxCA0fs.jpg",
          "s_pic": "http://jd.itying.com/upload/Hfe1i8QDOkfVt-PuGcxCA0fs.jpg_200x200.jpg"
      },
      {
          "_id": "59f6a2d27ac40b223cfdcf81",
          "title": "乐扣乐扣(lock&lock)菲特旋转盖轻量杯",
          "cid": "59f1e1ada1da8b15d42234e9",
          "price": "2001",
          "old_price": "2001",
          "count": 1,
          "checked": false,
          "pic": "http://jd.itying.com/upload/iPrQ_-r43nGjFyxYXiMZWTM6.jpg",
          "s_pic": "http://jd.itying.com/upload/iPrQ_-r43nGjFyxYXiMZWTM6.jpg_200x200.jpg"
      },
      {
          "_id": "5a012cba64604635f4a2eae0",
          "title": "小米 红米5A 全网通版 2GB+16GB 香槟金",
          "cid": "59f1e1ada1da8b15d42234e9",
          "price": 599,
          "old_price": "599.00",
          "count": 1,
          "checked": false,
          "pic": "http://jd.itying.com/upload/NkuiIr9puaI7cSxZHfz8UYOT.jpg",
          "s_pic": "http://jd.itying.com/upload/NkuiIr9puaI7cSxZHfz8UYOT.jpg_200x200.jpg"
      },
      {
          "_id": "5a0425bc010e711234661439",
          "title": "磨砂牛皮男休闲鞋-有属性",
          "cid": "59f1e1e880e7ed050cec999d",
          "price": "688",
          "old_price": "368",
          "count": 1,
          "checked": false,
          "pic": "http://jd.itying.com/upload/RinsvExKu7Ed-ocs_7W1DxYO.png",
          "s_pic": "http://jd.itying.com/upload/RinsvExKu7Ed-ocs_7W1DxYO.png_200x200.png"
      },
      {
          "_id": "5a042682010e71123466143b",
          "title": "2V341DD7低靴皮带扣细跟中跟鞋",
          "cid": "59f1e1e880e7ed050cec999d",
          "price": 188,
          "old_price": "888",
          "count": 1,
          "checked": false,
          "pic": "http://jd.itying.com/upload/cPvPwUACxcco6PYXWwhSrkPN.png",
          "s_pic": "http://jd.itying.com/upload/cPvPwUACxcco6PYXWwhSrkPN.png_200x200.png"
      },
      {
          "_id": "5a042702010e71123466143c",
          "title": "茵曼2017冬装新款棒球罗纹领落肩袖丝绒保暖棉衣外套女",
          "cid": "5a0424b8010e711234661437",
          "price": 399,
          "old_price": "1199",
          "count": 1,
          "checked": false,
          "pic": "http://jd.itying.com/upload/cRiODeTtSNgcknvzi2rNLq4k.png",
          "s_pic": "http://jd.itying.com/upload/cRiODeTtSNgcknvzi2rNLq4k.png_200x200.png"
      }
    ]
    }
  },

  created() {
    this.totle = this.result.length
  },

  methods: {
    // 增加商品数量
    addCount(good) {
      good.count++
      this.sumFn()
    },
    // 减少商品数量
    minusGood(good) {
      if(good.count > 1) {
        good.count--
      }
      this.sumFn()
    },

    // 删除商品
    delGood(i) {
      this.result.splice(i, 1)
      this.sumFn()
    },
    // 计算商品总数 勾选中的商品数量和商品总价
    sumFn() {
      this.totle = 0
      this.checkedGoods = 0
      this.sumPrice = 0
      this.result.forEach((item) => {
        this.totle += item.count
        if(item.checked) {
          // console.log(1)
          this.checkedGoods += item.count
          this.sumPrice += item.count * item.price
        }
      })
    }
  },

  watch: {
    allChecked(to, from) {
      if(to) {
        for(var i = 0; i<this.result.length; i++) {
            this.result[i].checked = true
        }
      } else {
        for(var i = 0; i<this.result.length; i++) {
            this.result[i].checked = false
        }
      }
      this.sumFn()
    },

    result:{
      deep: true,
      handler() {
        for(var i = 0; i<this.result.length; i++) {
          if(!this.result[i].checked) {
            this.allChecked = false
            return
          } else {
            this.allChecked = true
          }
        }
        this.sumFn()
      }
    }
  }
}
</script>
<style scoped>
  #container {
      width: 1200px;
      margin: 0 auto;
      height: 100%;
  }
  
  header {
      width: 100%;
      height: 70px;
      background-color: #444444;
      padding-top: 22px;
      padding-left: 20px;
  }
  
  header button {
      border: none;
      padding: 5px 15px;
      background-color: #fff;
      color: orange;
      cursor: pointer;
  }
  
  table {
      width: 100%;
  }
  
  thead th {
      padding: 12px 0;
  }
  
  td {
      text-align: center;
      padding: 12px 0;
  }
  
  .goods-img {
      width: 100px;
      height: 100px;
  }
  
  .good-box {
      min-height: 800px;
      border: 1px solid #333;
  }
  
  span {
      display: inline-block;
      width: 30px;
      height: 30px;
      text-align: center;
      line-height: 30px;
      border: 1px solid #333;
      vertical-align: middle;
  }
  
  .minus,
  .add {
      cursor: pointer;
  }
  
  .del {
      cursor: pointer;
  }
  
  footer {
      display: flex;
      height: 80px;
      background-color: #555;
      justify-content: space-between;
      color: #fff;
      align-items: center;
      padding: 0 20px;
  }
  
  footer div {
      line-height: 80px;
  }
  .sumPrice{
    display: inline-block;
    width: 100px;
  }
</style>
